<template>
    <div class="system_resource">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('system.resourceManage') }}</span>
            </h3>
            <div class="search">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><span @click="pathTo(0)">{{ $t('system.resourceManage') }}</span></el-breadcrumb-item>
                    <el-breadcrumb-item v-for="item in pathList" :key="item.id">
                        <span @click="pathTo(item.id)">{{ item.cnName }}</span>
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <el-button @click="showAddResDialog" type="primary">{{ $t('system.addResource') }}</el-button><!--新增资源-->
            </div>
        </div>
        <div class="data_list">
            <el-table :data="tableData" style="width: 100%" :max-height="tableMaxHeight">
                <el-table-column align="left" label="ID" prop="id"></el-table-column>
                <el-table-column align="left" :label="$t('system.systemType')" prop="systemName"></el-table-column><!--所属系统-->
                <el-table-column align="left" :label="$t('system.resourceName')" prop="name"><!--资源名-->
                    <template slot-scope="scope">
                        <a v-if="$i18n.locale === 'zhCN' && scope.row.cnName" @click="getChildResource(scope.row)" href="javascript:void(0);">{{ scope.row.cnName }}</a>
                        <a v-else @click="getChildResource(scope.row)" href="javascript:void(0);">{{ scope.row.name }}</a>
                    </template>
                </el-table-column>
                <el-table-column align="left" :label="$t('system.resourcePath')" prop="path"></el-table-column><!--资源地址-->
                <el-table-column align="left" :label="$t('system.resourceType')" prop="type"></el-table-column><!--资源类型-->
                <el-table-column align="left" :label="$t('system.sort')" prop="sort"></el-table-column><!--排序值-->
                <el-table-column v-if="isSystemAdmin" align="left" :label="$t('system.permission')"><!--权限-->
                    <template slot-scope="scope">
                        <el-button @click="editRes(scope.row)" class="btn" type="text" size="small">{{ $t('system.editResource') }}</el-button><!--编辑资源-->
                        <el-button @click="delRes(scope.row)" class="btn_red" type="text" size="small">{{ $t('system.delete') }}</el-button><!--删除-->
                    </template>
                </el-table-column>
            </el-table><!--end table-->
        </div>
        <div class="data_page">
            <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
        </div>

        <!--编辑资源start-->
        <alert-dialog :title="editResource ? $t('system.editResource') : $t('system.addResource')" :visible.sync="addResDialogShow" width="600px" :dialogPosition="'center'">
            <el-form ref="addResForm" :model="addResForm" :rules="addResRules" label-position="top">
                <el-row>
                    <el-col class="add_res_col" :span="12">
                        <el-form-item :label="$t('system.systemName')" prop="systemName"><!--系统名称-->
                            <el-input v-model="addResForm.systemName" :disabled="addResForm.parentId !== 0"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="add_res_col" :span="12">
                        <el-form-item :label="$t('system.path')" prop="path"><!--路径-->
                            <el-input v-model="addResForm.path"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="add_res_col" :span="12">
                        <el-form-item :label="$t('system.resourceName')" prop="name"><!--资源名称-->
                            <el-input v-model="addResForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="add_res_col" :span="12">
                        <el-form-item :label="$t('system.resourceChineseName')" prop="cnName"><!--资源中文名称-->
                            <el-input v-model="addResForm.cnName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="add_res_col" :span="12">
                        <el-form-item :label="$t('system.type')" prop="type"><!--类型-->
                            <el-select v-model="addResForm.type" style="width: 100%">
                                <el-option value="API"></el-option>
                                <el-option value="MENU"></el-option>
                                <el-option value="BUTTON"></el-option>
                                <el-option value="LINK"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col class="add_res_col" :span="12">
                        <el-form-item :label="$t('system.sort')" prop="sort"><!--排序值-->
                            <el-input v-model="addResForm.sort"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="add_res_col" :span="12">
                        <el-form-item :label="$t('system.desc')" prop="remark"><!--描述-->
                            <el-input v-model="addResForm.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="saveResource" v-show="editResource" type="primary">{{ $t('common.save') }}</el-button><!--保存-->
                <el-button @click="addResource" v-show="!editResource" type="primary">{{ $t('common.confirm') }}</el-button><!--确定-->
                <el-button @click="addResDialogShow = false" type="default">{{ $t('common.cancel') }}</el-button>
            </div>
        </alert-dialog>
        <!--编辑资源end-->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import AlertDialog from '@/components/alert-dialog';

    export default {
        name: 'systemAccount',
        components: {
            Pagination,
            AlertDialog
        },
        mixins: [mixin],
        data() {
            return {
                form: {
                    userName: ''
                },
                rules: {},
                addResDialogShow: false,
                pathList: [],
                currentParentId: 0,
                addResForm: {
                    id: 0,
                    path: '',
                    type: '',
                    systemName: '',
                    parentId: 0,
                    name: '',
                    cnName: '',
                    sort: 1,
                    remark: ''
                },
                addResRules: {
                    path: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'}
                    ],
                    systemName: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'}
                    ],
                    cnName: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'}
                    ],
                    sort: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNaturalNumber'), trigger: 'blur'}// 请输入自然数
                    ],
                    remark: []
                },
                editResource: false
            };
        },
        computed: {
            isSystemAdmin() {// 资金退回设置
                return this.$storage.get('user').username === 'systemAdmin'
            },
        },
        methods: {
            getTableData(page = this.page, parentId = 0) {
                const params = {
                    parentId,
                    pageNum: page.currentPage,
                    pageSize: this.page.pageSize
                };
                this.$api.systemManage.getPageResourceList(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.tableData = data.resourceList || [];
                        this.page.recordsTotal = data.total;
                        this.page.currentPage = page.currentPage;
                        this.tableMaxHeight = window.document.body.clientHeight - 180;
                    }
                });
            },
            onSearch() {
                this.page.currentPage = 1;
                this.getTableData();
            },
            delRes(row) {
                this.$confirm(this.$t('system.isConfirmDelete')).then(() => {
                    this.$api.systemManage.deleteResource({id: row.id}).then(() => {
                        this.$message.success(this.$t('common.successfulOperation'));
                        this.getTableData(this.page, this.currentParentId);
                    });
                });
            },
            editRes(row) {
                this.addResForm.parentId = row.parentId;
                this.addResForm.name = row.name;
                this.addResForm.cnName = row.cnName;
                this.addResForm.path = row.path;
                this.addResForm.sort = row.sort;
                this.addResForm.remark = row.remark;
                this.addResForm.systemName = row.systemName;
                this.addResForm.type = row.type;
                this.addResForm.id = row.id;
                this.addResDialogShow = true;
                this.editResource = true;
            },
            getChildResource(row) {
                this.currentParentId = row.id;
                this.pathList.push({
                    id: row.id,
                    name: row.name,
                    cnName: row.cnName,
                    systemName: row.systemName,
                    path: row.path
                });
                this.getTableData(this.page, row.id);
            },
            pathTo(id) {
                this.currentParentId = id;
                // 点击面包屑导航
                const temp = this.pathList;
                this.pathList = [];
                if (id !== 0) {
                    for (let i = 0; i < temp.length; i++) {
                        this.pathList.push(temp[i]);
                        if (temp[i].id === id) {
                            break;
                        }
                    }
                }
                this.getTableData(this.page, id);
            },
            showAddResDialog() {
                this.editResource = false;
                this.addResDialogShow = true;
                this.$nextTick(() => {
                    this.$refs.addResForm.resetFields();
                    this.calcAddRes();
                });
            },
            addResource() {
                this.$refs.addResForm.validate((value) => {
                    if (value) {
                        let params = {
                            path: '',
                            type: '',
                            systemName: '',
                            parentId: 0,
                            name: '',
                            cnName: '',
                            sort: 1,
                            remark: ''
                        };
                        params = Object.assign(params, this.addResForm);
                        delete params.id;
                        this.$api.systemManage.addResource(params).then(() => {
                            this.$message.success(this.$t('common.successfulOperation'));
                            this.getTableData(this.page, this.currentParentId);
                            this.addResDialogShow = false;
                        });
                    }
                });
            },
            saveResource() {
                this.$refs.addResForm.validate((value) => {
                    if (value) {
                        let params = {
                            path: '',
                            type: '',
                            systemName: '',
                            parentId: 0,
                            name: '',
                            cnName: '',
                            sort: 1,
                            remark: ''
                        };
                        params = Object.assign(params, this.addResForm);
                        this.$api.systemManage.editResource(params).then(() => {
                            this.$message.success(this.$t('common.successfulOperation'));
                            this.getTableData(this.page, this.currentParentId);
                            this.addResDialogShow = false;
                            this.editResource = false;
                        });
                    }
                });
            },
            calcAddRes() {
                if (this.pathList.length) {
                    const path = this.pathList[this.pathList.length - 1];
                    this.addResForm.parentId = path.id;
                    // this.addResForm.path = path.path;
                    this.addResForm.systemName = path.systemName;
                } else {
                    this.addResForm.parentId = 0;
                    // this.addResForm.path = '';
                    this.addResForm.systemName = '';
                }
            }
        },
        created() {
            const user = this.$storage.get('user');
            this.getTableData(this.page, 0);
        }
    };
</script>

<style lang="scss" scoped>
    .inputPhone {
        width: 265px;
    }

    .search {
        background-color: #fff;
        padding: 10px 40px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .data_list {
        background-color: #fff;
        margin: 16px 24px;
        padding: 10px 16px;
    }

    .btn {
        margin-right: 15px;
    }

    .btn_red {
        /*border-color: #d9415c;*/
        color: #d9415c;
    }

    .role_form {
        /*padding: 0 16px;*/
    }

    .account_form_type {
        width: 100%;
    }

    .tree_node {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .add_res_col {
        &:first-child {
            padding-right: 8px;
        }
        &:last-child {
            padding-left: 8px;
        }
    }
</style>
